<template>
	<view class="content">
		<headerNav title="开单"></headerNav>
		<view class="open-main">
			<view class="con-item">
				<view class="con-title">开单时间</view>
				<view class="con-select disabled time-box">
					<!-- <input type="text" class="ipt left-ipt" placeholder="开始时间" v-model="startDate" :disabled="true" @click="selDate(2)"> -->
					<uni-datetime-picker ref="timeRef" type="datetime" :value="startDate" @change="(e:any)=>selDate(e,1)" :border="false" :clear-icon="false"></uni-datetime-picker>
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">销售</view>
				<view class="con-select disabled">
					<input type="text" class="ipt left-ipt" placeholder="销售人员" v-model="username" :disabled="true">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">客户姓名</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="客户姓名" v-model="name">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">联系电话</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="联系电话" v-model="mobile">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">车牌号</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="车牌号" v-model="carNo">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">车型</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="车型" v-model="carType">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">车架号</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="车架号" v-model="frameNo">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">车辆颜色</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="车辆颜色" v-model="color">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title require">产品型号</view>
				<view class="sku-ipt">
					<!--添加sku-->
					<uni-data-select v-model="code" :localdata="itemData" placeholder="产品编码"></uni-data-select>
					<view class="btn add-btn" @click="addItem()">添加</view>
				</view>
				<view class="sku-box">
					<!--sku列表-->
					<template v-for="(item) in skus" :key="item.value">
						<view class="sku-item flex flex-between">
							<image :src="item.pic" class="item-pic"></image>
							<view class="item-info">
								<view class="item-title">{{item.text}}</view>
								<view class="item-price">￥{{item.price}}</view>
								<view class="item-num flex">
									X <input type="text" class="ipt num-ipt" placeholder="数量" v-model="item.num">件
								</view>
							</view>
							<view class="del-btn flex flex-center" @click="delItem(item.value)">
								<view class="del-icon"></view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">实收金额</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="实收金额" v-model="money">
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">完成时间</view>
				<view class="con-select time-box">
					<!-- <input type="text" class="ipt left-ipt" placeholder="完成时间" v-model="endDate" :disabled="true" @click="selDate(2)"> -->
					<uni-datetime-picker ref="timeRef" type="datetime" :value="endDate"  @change="(e:any)=>selDate(e,2)" :border="false" :clear-icon="false"></uni-datetime-picker>
				</view>
			</view>
			<view class="con-item">
				<view class="con-title">备注</view>
				<view class="con-select">
					<input type="text" class="ipt left-ipt" placeholder="备注" v-model="remark">
				</view>
			</view>
		</view>
		<view class="btn" @click="done()">确定</view>
		<!-- <uni-calendar :lunar="false" ref="timeRef" :insert="false" @confirm="getdate"></uni-calendar> -->
    </view>
</template>

<script lang="ts" setup>
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import { computed, ref } from 'vue';
import { addOrder, getItem, profile } from '../../api/public';
import { tip,goto, datetime, loading, hideloading, downImg } from '../../utils/utils';
	const startDate = ref("")
	const timeRef = ref()
	const username = ref("")
	const name = ref("")
	const mobile = ref("")
	const carNo = ref("")
	const carType = ref("")
	const frameNo = ref("")
	const color = ref("")
	const endDate = ref("")
	const remark = ref("")
	const number = ref(1)
	const money = ref("")
	type item = {
		pic:string,
		text:string,
		sku_id:number,
		goods_id:number,
		value:string,
		price:number,
		num:number
	}
	const skus = ref<item[]>([])		//添加的商品
	const items = ref<any[]>([])		//候选商品列表
	const itemData = computed(()=>{
		console.log(items.value)
		if(items.value.length>0){
			let res = [] as item[]
			items.value.forEach((e:any)=>{
				if(e.sku.length>0){
					e.sku.forEach((i:any)=>{
                        res.push({
							pic:e.pic,
                            text:e.title+' '+i.skuname,
                            sku_id:i.sku_id,
                            goods_id:e.goods_id,
							value:e.goods_id+"_"+i.sku_id,
							price:i.price,
							num:1,
                        })
                    })
                }
                else{
                    res.push({
                    	pic:e.pic,
                        text:e.title,
                        sku_id:0,
                        goods_id:e.goods_id,
						value:e.goods_id+"_0",
						price:e.price,
						num:1
                    })
				}
			})
			return res
		}
		else{
			return []
		}
	})
	const code = ref("")
	onShow(()=>{
		//登录检测
		let token = uni.getStorageSync('token')
		if(!token){
			return tip('请先登录',()=>{
				goto('index/login')
			})
		}
		else{
			let user = uni.getStorageSync('user') || {}
            if(user.type!=1){
                return tip('没有权限',()=>{
                    goto('index/index')
                })
            }
			else{
				username.value = user.name || ''
			}
		}
	})
	onLoad(()=>{
		/*profile().then((res:any)=>{
			if(res.error==0){
				username.value = res.data.name
			}
			else{
				tip(res.msg)
			}
		})*/
		getItem().then((res:any)=>{
			if(res.data.list.length>0){
				items.value = res.data.list.filter((item:any)=>item.plate==="1")
			}
		})
		//当前日期
		startDate.value = datetime("","Y-m-d H:i:s")
		endDate.value = datetime("","Y-m-d H:i:s")
	})
	let datedom = 0
	/*const selDate = (e:number)=>{
		datedom = e
		setTimeout(()=>{
			timeRef.value.open()
		},300)
	}*/
	const selDate = (e:any,index:number)=>{
		if(index==1){
			startDate.value = e
		}
		else{
			endDate.value = e
		}
		console.log(e)
	}
	/*const getdate = (e:any)=>{
		if(datedom==1){
			startDate.value = e.fulldate
		}
		else{
			endDate.value = e.fulldate
		}
	}*/
	const done = ()=>{
		console.log('提交表单')
		let sel_items = skus.value.map((item:item)=>{
			return {
				"goods_id": item.goods_id,
				"sku_id": item.sku_id,
				"num": item.num
			}
		})
		if(sel_items.length==0){
			return tip("请添加开单产品")
		}
		let data = {
			"form": {
				"inputTime":startDate.value,
				"remark":remark.value,
                "inputUser": username.value,
				"items": sel_items,
				"order": {
					"customer": name.value,
					"contact": mobile.value,
					"license": carNo.value,
					"vehicle": carType.value,
					"frame_num": frameNo.value,
					"vehicle_color": color.value,
					"remark": remark.value,
					"billing_time": endDate.value,
					"price": money.value,
				}
			}
		}
		loading("正在开单")
		addOrder(data).then((res:any)=>{
			if(res.error==0){
				//tip('开单成功!')
				startDate.value = ""
                endDate.value = ""
                name.value = ""
                mobile.value = ""
                carNo.value = ""
                carType.value = ""
                frameNo.value = ""
                color.value = ""
                remark.value = ""
                money.value = ""
                code.value = ""
				skus.value = []		//添加的商品
				if(res.data.img){
					/* uni.downloadFile({
						url:res.data.img,
						success(res:any){
							hideloading()
							uni.getFileSystemManager().saveFile({
								tempFilePath:res.tempFilePath,
								success(file:any){
									console.log(file.savedFilePath)
									uni.openDocument({
										filePath:file.savedFilePath,
										showMenu:true,
									})
								},
								fail(err:any) {
									tip("保存失败")
								}
							})
						},
						fail(err:any){
							tip("保存失败")
						}
					}) */
					downImg(res.data.img)
				}
			}
			else{
				tip(res.msg)
			}
		})
	}
	const addItem = ()=>{
		let found = skus.value.find(e => e.value === code.value)
		console.log(code.value)
		if(typeof found!='undefined'){
			return tip('不要重复添加')
		}
		let res = itemData.value.find(e => e.value === code.value)
		console.log(res)
		if(typeof res!='undefined'){
			skus.value.push(res)
		}
	}
	const delItem = (id:string)=>{
		skus.value = skus.value.filter((e:item)=>e.value!==id)
	}
</script>

<style lang="scss">
.open-main{
	padding:32rpx 44rpx;
	.con-item{
		margin-bottom:60rpx;
		.con-title{
			font-size:28rpx;
			height:40px;
			line-height:40rpx;
		}
		.require::before{
			content:"*";
			color:#F53F3F;
			font-size:32rpx;
			padding-right:8rpx;
		}
		.con-select{
			margin-top:16rpx;
			height: 64rpx;
			background:#fff;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border:1px solid #C9CDD4;
			padding:10rpx 24rpx;
			.ipt{
				height:100%;
				color:#86909C;
				font-size:28rpx;
			}
		}
		.time-box{
			padding:0;
			:deep(){
				.uni-date__x-input{
					height:60rpx !important;
					line-height:60rpx !important;
				}
			}
		}
		.disabled{
			background:#F2F3F5;
			:deep(){
				.uni-date-x{
					background:#F2F3F5 !important;
				}
			}
		}
		.sku-ipt{
			width:628rpx;
			margin:0 auto;
			.add-btn{
				width:628rpx;
				height:56rpx;
				margin:20rpx auto;
			}
		}
		.sku-box{
			width:628rpx;
			margin:40rpx auto 0;
			.sku-item{
				margin-bottom:20rpx;
				.item-pic{
					width:160rpx;
					height:160rpx;
					broder-radius:8rpx;
				}
				.item-info{
					font-size:28rpx;
					color:#171C26;
					flex:1;
					margin-left:20rpx;
					.item-title{
						@include text-ellipsis(1);
					}
					.item-price{
						margin-top:6rpx;
					}
					.num-ipt{
						border:1px solid #C9CDD4;
                        border-radius: 4rpx 4rpx 4rpx 4rpx;
                        width: 100rpx;
                        height: 48rpx;
                        line-height: 48rpx;
                        padding: 0 10rpx;
                        margin-top: 10rpx;
                        font-size: 28rpx;
					}
				}
				.del-btn{
					width:48rpx;
					height:48rpx;
					border-radius:24rpx;
					background:#BABABA;
					.del-icon{
						width: 16rpx;
						height: 0rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 4rpx solid #FFFFFF;
					}
				}
			}
		}
	}
}
.btn{
	width:710rpx;
	margin:86rpx auto;
}
</style>
